<template>
  <div class="approve">
    <div class="sign-tab">
      <van-nav-bar
        left-arrow
        class="title-bar"
        title="文件审批"
        :border="false"
        @click-left="$router.go(-1)"
      />
      <span class="company">{{ title }}</span>
    </div>
    <!-- 合同模块 -->
    <div class="contract-img">
      <div
        class="doc-page-content"
        :id="index + 1"
        v-for="(item, index) in contractImg"
        :key="index"
      >
        <img :src="'data:image/png;base64,' + item" alt="" />
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="sign-button">
      <van-button plain type="info" @click="addRemarks = true">拒绝</van-button>
      <van-button type="info" @click="addRemarks = true">同意</van-button>
    </div>
    <!--  -->
    <van-popup v-model="addRemarks" round>
      <div class="remarks-box">
        <div class="remarks-title">
          <div class="remarks-content"><i></i>审批原因<i></i></div>
          <van-field
            v-model="remarks"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入"
            show-word-limit
            label-width="3em"
          />
        </div>
        <div class="remarks-end">
          <van-button class="btn-left" type="default" block @click="audit(2)"
            >拒绝</van-button
          >
          <van-button class="btn-right" type="default" block @click="audit(1)"
            >同意</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  addContractMessage,
  addContractPreview,
  addContractAudit
} from '@/api/contract'
export default {
  data() {
    return {
      // 合同图片
      contractImg: [],
      // 待签名文件
      fileList: [],
      // 合同详情
      contractAllInfo: {},
      // 展示第一个文件
      curFile: {
        contractId: '',
        fileId: '',
        filePath: '',
        filePages: []
      },
      // 标题
      title: '',
      addRemarks: false,
      remarks: ''
    }
  },
  created() {
    this.info()
    console.log(this.$route.params)
  },
  mounted() {},
  methods: {
    async info() {
      try {
        await addContractMessage({
          contractId: this.$route.params.contract.contractId
        }).then(res => {
          if (res.data.code !== '0') {
            return this.$toast.fail('图片获取失败!')
          }
          this.contractAllInfo = res.data.data
          this.title = this.contractAllInfo.contractBaseInfo.title

          // 待签名文件列表
          const tempFileArr = []
          this.contractAllInfo.signingFileInfoList.forEach(item => {
            const file = {
              fileId: item.fileId,
              fileName: item.fileName,
              filePath: item.filePath,
              filePages: item.filePages
            }
            tempFileArr.push(file)
          })
          this.fileList = tempFileArr

          // 展示第一个文件
          this.curFile.contractId = this.contractAllInfo.contractBaseInfo.contractId
          this.curFile.fileId = this.fileList[0].fileId
          this.curFile.filePath = this.fileList[0].filePath
          const pages = []
          for (var i = 0; i <= this.fileList[0].filePages; i++) {
            pages.push(i + 1)
          }
          this.curFile.filePages = pages
        })
        for (let i = 1; i < this.curFile.filePages.length; i++) {
          await addContractPreview({
            // contractId: this.curFile.contractId,
            filePath: this.curFile.filePath,
            pageNum: i
          }).then(res => {
            if (res.data.code !== '0') {
              return this.$toast.fail('图片获取失败!')
            }
            this.contractImg.push(res.data.data)
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 审核
    async audit(val) {
      if (val === 2) {
        if (this.remarks === '') return this.$toast('请输入拒绝的理由')
      }
      this.addRemarks = false
      this.$toast.loading({
        message: '审批中',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      // 审批合同信息\
      const auditInformation = {
        processId: this.$route.params.contract.processId,
        contractId: this.$route.params.contract.contractId,
        businessType: this.$route.params.contract.businessType,
        approvalState: val,
        remarks: this.remarks
      }
      try {
        await addContractAudit(auditInformation).then(data => {
          console.log(data)
          if (data.data.code !== '0') {
            return this.$toast.fail('审批操作失败')
          }
          this.$toast.success('审核成功')
          // this.$router.push('/layout')
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.approve {
  padding: 168px 0 120px 0;
  .sign-tab {
    height: 88px;
    width: 100%;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
    .title-bar {
      /deep/.van-nav-bar__title {
        font-size: 34px;
        font-weight: bold;
      }
      /deep/.van-icon {
        font-size: 42px;
        color: #000;
      }
    }
    .company {
      font-size: 26px;
      display: block;
      height: 80px;
      line-height: 80px;
      padding-left: 41px;
      box-sizing: border-box;
      border-bottom: 1px solid #e0e0e0;
      color: #2c2c2c;
      background-color: #fff;
    }
  }
  // 合同
  .contract-img {
    height: 78.4vh;
    .doc-page-content {
      position: relative;
      img {
        display: block;
        width: 100%;
      }
      /deep/.control-signseal {
        text-align: center;
        position: absolute;
        border: 1px dashed rgb(0, 175, 161);
      }
    }
  }
  // 按钮
  .sign-button {
    height: 120px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e0e0e0;
    .van-button {
      width: 321px;
      height: 81px;
    }
  }
  //
  .remarks-box {
    width: 560px;
    height: 440px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .remarks-title {
      text-align: center;
      i {
        display: inline-block;
        width: 30px;
        height: 1px;
        border-bottom: 1px solid #999999;
        vertical-align: middle;
        margin: 0 20px;
      }
      .van-field {
        background-color: #fafafa;
        width: 496px;
        height: 184px;
        margin: 0 32px;
        font-size: 28px;
      }
      .remarks-content {
        font-size: 34px;
        margin: 50px 0 39px;
      }
    }
    .remarks-end {
      display: flex;
      .btn-left {
        font-size: 32px;
        color: #666666;
        border-right: 0;
      }
      .btn-right {
        font-size: 32px;
        color: #2489f2;
      }
    }
  }
}
</style>
